<template>
  <el-popover placement="bottom-start" title="" :width="360" trigger="click">
    <div style="text-align: end">
      <el-button :loading="readLoading" type="text" @click="handleReadAll"
        >一键已读</el-button
      >
    </div>
    <div class="scroll-wrapper" ref="scrollWrapper" @scroll="handleScroll">
      <el-badge
        style="width: 100%; margin: 6px 0"
        :is-dot="!i.read"
        v-for="i in dataSource"
        :key="i"
      >
        <li class="infinite-list-item" @click="handleClick(i)">
          <el-text line-clamp="2" style="width: 100%">
            {{ i.content }}
          </el-text>
          <div style="text-align: end">
            {{ new Date(i.created_at).toLocaleString() }}
          </div>
        </li>
      </el-badge>

      <li style="text-align: center; height: 30px">
        {{ hasMore ? '加载更多...' : '我是有底线的...' }}
      </li>
    </div>
    <template #reference>
      <el-badge
        style="cursor: pointer"
        :value="noReadNum > 0 ? noReadNum : ''"
        :max="99"
        class="item"
      >
        <el-icon>
          <BellFilled />
        </el-icon>
      </el-badge>
    </template>
  </el-popover>
</template>
<script setup>
import { ref } from 'vue'
import {
  httpGetMsgList,
  httpReadMsg,
  httpGetNoReadMsgList,
} from '@/api/note.js'
import useNoteStore from '@/stores/note'
import { debounce } from '@/utils/tools.ts'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
const noteState = useNoteStore()
const { noReadNum } = storeToRefs(noteState)
const router = useRouter()
const last_id = ref(0)
const dataSource = ref([])
const readLoading = ref(false)
const getMsgList = () => {
  httpGetMsgList({
    last_id: last_id.value,
  }).then((res) => {
    if (res) {
      dataSource.value = res.list.map((item) => {
        return {
          ...item,
        }
      })
    }
  })
}
getMsgList()
const handleReadAll = async () => {
  readLoading.value = true
  await httpReadMsg()
  readLoading.value = false
  dataSource.value.forEach(item => {
    item.read = 1
  })
  noteState.setNoReadNum(0)
}
const getNoReadMsg = async () => {
  const res = await httpGetNoReadMsgList()
  if (res) {
    noteState.setNoReadNum(res.num)
  }
}

const count = ref(0)
const hasMore = ref(true)
const loading = ref(false)
const load = async () => {
  count.value += 1
  loading.value = true
  if (hasMore.value) {
    last_id.value = dataSource.value[dataSource.value.length - 1].id
    const res = await httpGetMsgList({
      last_id: last_id.value,
    })
    if (res.list.length >= 10) {
      hasMore.value = true
    } else {
      hasMore.value = false
    }
    dataSource.value = [...dataSource.value, ...res.list]
  }
  loading.value = false
}
const handleClick = async (item) => {
  if (!item.read) {
    // noteState.setNoReadNum(res.num)
    noReadNum.value--
  }
  item.read = 1
  let link = router.resolve('/file/note-detail/' + item.source_id).href
  window.open(link, '_blank')
  httpReadMsg({
    ids: [item.id],
  }).then((res) => {
    // getNoReadMsg()
  })
}
const scrollWrapper = ref(null)
const handleScroll = debounce((e) => {
  const { scrollTop, scrollHeight, clientHeight } = scrollWrapper.value
  if (scrollTop + clientHeight >= scrollHeight - 5) {
    load()
  }
}, 300)
</script>
<style scoped lang="scss">
.scroll-wrapper {
  max-height: 500px;
  padding: 0 4px;
  margin: 0;
  list-style: none;
  overflow-y: auto;
  overflow-x: hidden;
  @include scrollBar;
  .infinite-list-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
    background: var(--el-color-primary-light-9);
    // margin: 10px;
    color: var(--el-color-primary);
    padding: 8px;
    cursor: pointer;
  }
}
</style>
